﻿<template>
  <v-card>
    <v-card-title class="elevation-1">
      <span class="headline" v-text="isEdit ? '修改品牌' : '新增品牌'"></span>
    </v-card-title>
    <v-divider/>
    <v-card-text class="px-3">
      <v-form v-model="valid" ref="myBrandForm">
        <v-container grid-list-md>
          <v-layout wrap>
            <v-flex class="md6">
              <v-text-field v-model="brand.name" label="品牌名称" required :rules="nameRules"/>
            </v-flex>
            <v-flex class="md6">
              <v-text-field v-model="brand.introduction" label="品牌描述" required />
            </v-flex>
          <!--  <v-flex>
              <el-cascader
                      v-model="brand.categories"
                      :options="options"
                      :props="cascaderProps"
                      placeholder="分类"
                      clearable></el-cascader>
            </v-flex>-->
          </v-layout>
        </v-container>
      </v-form>
    </v-card-text>
    <v-card-actions>
      <v-spacer/>
      <v-btn depressed  small @click="submit">提交</v-btn>
      <v-btn depressed small @click="clear">重置</v-btn>
      <v-btn depressed  small @click="close">关闭</v-btn>
    </v-card-actions>
  </v-card>

</template>

<script>
  export default {
    name: "brand-form",
    props: {
      oldBrand: {
        type: Object
      },
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        valid: false, // 表单校验结果标记
        options:[],
        cascaderProps: {
          //可以选中一级内容
          checkStrictly: true,
          //指定触发方式
          expandTrigger: 'hover',
          //数据源的id做数据绑定
          value: 'id',
          //数据源name渲染出来的内容
          label: 'name',
          //数据源的children做嵌套
          children: 'children'
        },
        brand: {
          name: '', // 品牌名称
          introduction: '', // 品牌首字母
          image: '',// 品牌logo
          categories: [], // 品牌所属的商品分类数组
        },
        nameRules: [
          v => !!v || "品牌名称不能为空",
          v => /^.{2,}$/.test(v) || "品牌名称至少2位"
        ],
        letterRules: [
          v => !!v || "首字母不能为空",
          v => /^[a-zA-Z]$/.test(v) || "品牌字母只能是1个字母"
        ]
      }
    },
    mounted() {
      this.loadOptions();
    },
    methods: {
      loadOptions() {
        this.$http.get("/category/getByCase").then(res => {
          if (res.data.code === 200) {
            this.options = res.data.data
          }else {
            console.log("加载分类列表失败")
          }
        })
      },
      submit() {
        // 表单校验
        if (this.$refs.myBrandForm.validate()) {

          this.$http({
            method: this.isEdit ? 'put' : 'post',
            url: '/brand/saveOrUpdate',
            data: this.brand
          }).then(() => {
            // 关闭窗口
            this.$emit("close");
            this.$message.success("保存成功！");
          })
            .catch(() => {
              this.$message.error("保存失败！");
            });
        }
      },
      clear() {
        // 重置表单
        this.$refs.myBrandForm.reset();
        // 需要手动清空商品分类
        this.categories = [];
      },
      close(){
        this.$emit("close");
      }
    },
    watch: {
      oldBrand: {// 监控oldBrand的变化
        handler(val) {
          if (val) {
            // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
            this.brand = Object.deepCopy(val)
          } else {
            // 为空，初始化brand
            this.brand = {
              name: '',
              letter: '',
              image: '',
              categories: [],
            };
            this.$refs.myBrandForm.reset();
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped>

</style>
